<template>
   <ion-page>
    <ion-header>
      <ion-toolbar>
      <ion-title>notice list</ion-title>
      </ion-toolbar>
      
    </ion-header>
    
  <ion-content>
    <ion-grid>
        <ion-row fixed="true" class="ion-align-items-start">
          <ion-col size-sm="2">ID</ion-col>
          <ion-col size-sm="2">OBS/INS</ion-col>
          <ion-col size-sm="2">TRIGGER  </ion-col>
          <ion-col size-sm="3">SUBJECT</ion-col>
          <ion-col size-sm="3">TIME</ion-col>
          <!-- <ion-col size-sm="2">ERR</ion-col> -->
        </ion-row>
      
    <ion-list v-if="items">
      <ion-item v-for="item in items" :key="item.id" button @click="goToDetail(item)">
        <ion-col size-sm="2">{{ item.alertId }}</ion-col>
        <ion-col size-sm="2">{{ item.triggerTelescopeName }}</ion-col>
        <ion-col size-sm="2">{{ item.triggerName }}</ion-col>
        <ion-col size-sm="3">{{ item.alertPacketTypeName }}</ion-col>
        <ion-col size-sm="3">{{ item.triggerTime }}</ion-col>
        <!-- {{ item.posError }} -->
      </ion-item>
    </ion-list>
  </ion-grid>
  </ion-content>
  </ion-page>
</template>

<script setup lang="ts">


import { IonPage, IonHeader, IonToolbar, IonTitle,IonItem, IonContent,IonGrid,IonRow,IonCol,IonList} from '@ionic/vue';
//import axios from 'axios';
import service from '@/api/api'

import {onMounted, ref} from 'vue';
import router from '@/router';
interface item {
  alertId: '';
  triggerTelescopeName: '';
  triggerName:'';
  alertPacketTypeName: '';
  triggerTime: '';
   id:''
  // posError: '';
}
const items = ref<item[]>([]);

async function fetchData() {
      try {
        const response = await service.post('/alertApi/getAlerts',{length:100});
        items.value = response.data.data.list; // 更新数据
        console.log(response.data)
      } catch (error) {
        // 处理请求错误
        console.error('Error fetching data:',error);
      }
    }  
  
    onMounted(fetchData);
    const goToDetail = (item: { id: any; }) => {
      router.push({
      name: 'noticedetails',
      params: { id: item.id }, 
    });
  };

 
</script>
<style scoped>
  ion-title{
    text-align: center;
  }
  ion-col {
    color: #1c1b1b;
    text-align: center;
  }
</style>